#header
	z-index: 10
	position: absolute
	top: 0
	width: 100%
	opacity: .97
	height: $TitleHeight
	background-color: $TitleBarBg
	padding: 13px 0 0
	text-align: center
	-webkit-app-region: drag

	h1
		color: $TitleBarText
		font-size: 0.9em
		top: -3px
		position: relative

	.btn-set
		position: absolute;
		left: 15px;
		z-index: 10;

	// Changes the min/max/close button position depending on OS
	nav
		-webkit-app-region: no-drag

		&.darwin
			position: absolute;
			left: 15px;

		&.fs-darwin
			top: 0px;
			right: 7px;
			left: initial;

		&.win32,
		&.linux
			right: 7px;
			left: initial;

		&.fs-win32,
		&.fs-linux
			position: absolute;
			left: 2px;
			top: 2px;

	.btn-os
		float: left
		margin: 0 6px 0 0
		background: #000
		border-radius: 30px
		border: 0
		color: transparent
		display: inline-block
		font-size: 10px
		height: 12px
		padding: 0
		text-align: center
		width: 12px
		cursor: pointer
		background: url('../images/icons/topbar_sprite.png')

		&.os-min
			background-position: 0px 0px;
		&.os-max
			background-position: -12px 0px;
		&.os-close
			background-position: -24px 0px;

		&.os-min:hover
			background-position: -36px 0px;
		&.os-max:hover
			background-position: -48px 0px;
		&.os-close:hover
			background-position: -60px 0px;

		&.fullscreen
			color:$FullScreenButton;
			background: transparent;
			margin:0;
			z-index: 10;
			width:32px;
			height:32px;
			border-radius:0;
			display:block;

		&.fullscreen::before
			content: "\e000";
			font-family: VideoJS;
			font-size: 1.85em;
			line-height: 0.2em;
			background: none;
			display:block;
			text-shadow: 0 1px 0 rgba(255,255,255,0.1)

		&.fullscreen.active::before
			content: "\e00B";

		&.fullscreen:hover
			color:$FullScreenButtonHover;

	.btn-set.win32
		top: 6px
		right: 3px
		.btn-os
			float: left
			margin: 0 2px 0 0
			background: #000
			-webkit-border-radius: 0px
			border-radius: 0px
			border: 0
			color: transparent
			display: inline-block
			font-size: 10px
			height: 16px
			padding: 0
			text-align: center
			width: 20px
			cursor: pointer
			background: url("../images/icons/topbar_sprite_win.png")
			-webkit-filter $PngLogo
			&.os-close
				background-position -40px 0px
			&.os-max
				background-position -20px 0px
			&.os-min
				background-position 0px 0px
			&.os-close:hover
				background-position -100px 0px
				-webkit-filter brightness(1)
			&.os-max:hover
				background-position -80px 0px
				-webkit-filter brightness(1)
			&.os-min:hover
				background-position -60px 0px
				-webkit-filter brightness(1)


	.btn-set.darwin
		.btn-os
			&.os-close
				background: #CA2C24
			&.os-max
				background: #239C3A
			&.os-min
				background: #E3AF0A

		&:hover
			.btn-os
				background: url('../images/icons/topbar_sprite.png')

				&.os-min
					background-position: -36px 0px;
				&.os-max
					background-position: -48px 0px;
				&.os-close
					background-position: -60px 0px;

.header-shadow 
	box-shadow: $TopBarShadow